<template>
  <div>
    <a-card :bordered="false" style="width: 100%">
      <a-form-model ref="nonFunctionDemandForm" :rules="nonFunctionDemandRules" :model="nonFunctionalDemand">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="交易服务时间"
              prop="transServerTime"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-select v-model="nonFunctionalDemand.transServerTime">
                <a-select-option value="7*24小时">7*24小时</a-select-option>
                <a-select-option value="5*8小时">5*8小时</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="并发用户数"
              prop="concurrencyUserAmount"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input-number v-model="nonFunctionalDemand.concurrencyUserAmount" :min="0" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="响应时间要求"
              prop="responseTime"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 10 }"
              :colon="false"
            >
              <a-select v-model="nonFunctionalDemand.responseTime">
                <a-select-option value="秒级">秒级</a-select-option>
                <a-select-option value="分钟级">分钟级</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="TPS峰值"
              prop="tpsMaximum"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.tpsMaximum" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="数据查询历史范围"
              prop="dateQueryRange"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.dateQueryRange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="单次查询跨度"
              prop="singleQueryRange"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.singleQueryRange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="分页显示记录数"
              prop="paginationViewAmount"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.paginationViewAmount" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="日交易量"
              prop="dailyTransAmount"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.dailyTransAmount" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="是否涉及生成文件"
              prop="printFlag"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 10 }"
              :colon="false"
            >
              <a-select v-model="nonFunctionalDemand.printFlag">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" v-if="nonFunctionalDemand.printFlag == 1">
            <a-form-model-item
              label="生成文件范围"
              prop="createFileRange"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.createFileRange" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="是否涉及计算"
              prop="calculateFlag"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 10 }"
              :colon="false"
            >
              <a-select v-model="nonFunctionalDemand.calculateFlag">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" v-if="nonFunctionalDemand.calculateFlag == 1">
            <a-form-model-item
              label="计算场景说明 "
              prop="calculateDescription"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="nonFunctionalDemand.calculateDescription" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'nonFunctionalDemand',
  props: {
    nonFunction: {
      type: Object
    }
  },
  data() {
    return {
      nonFunctionalDemand: this.nonFunction,
      nonFunctionDemandRules: {
        transServerTime: [{ required: true, message: '请选择交易服务时间', trigger: 'blur' }],
        concurrencyUserAmount: [{ required: true, message: '请输入并发用户数', trigger: 'blur' }],
        responseTime: [{ required: true, message: '请选择相应时间要求', trigger: 'blur' }],
        tpsMaximum: [{ required: true, message: '请输入TPS峰值', trigger: 'blur' }],
        dateQueryRange: [{ required: true, message: '请输入数据查询历史范围', trigger: 'blur' }],
        singleQueryRange: [{ required: true, message: '请输入单次查询跨度', trigger: 'blur' }],
        paginationViewAmount: [{ required: true, message: '请输入分页显示记录数', trigger: 'blur' }],
        dailyTransAmount: [{ required: true, message: '请输入日交易量', trigger: 'blur' }],
        printFlag: [{ required: true, message: '请选择是否生成文件', trigger: 'blur' }],
        createFileRange: [{ required: true, message: '请输入生成文件范围', trigger: 'blur' }],
        calculateFlag: [{ required: true, message: '请选择是否涉及计算', trigger: 'blur' }],
        calculateDescription: [{ required: true, message: '请输入计算场景说明', trigger: 'blur' }]
      }
    }
  },
  watch: {
    nonFunction(newVal) {
      this.nonFunctionalDemand = newVal
    }
  },
  methods: {
    validateNonFunc() {
      let flag
      this.$refs.nonFunctionDemandForm.validate(valid => {
        if (valid) {
          flag = '-1'
        } else {
          flag = '1'
        }
      })
      return flag
    }
  }
}
</script>

<style scoped lang="less"></style>
